<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			//第一个练习
			
			/**
			 * 1、创建两个UL标签
			 * 2、给ul标签中添加三个新的li标签
			 * 3、在li标签中添加新的文本值  例如 苹果、香蕉、芒果
			 * 4、点击每个li标签，使其弹出该li标签中的水果名
			 * 
			 */
					
					function fun(a,b){						
					 
					 var clone1=city.cloneNode(true);
					 var clone2=game.cloneNode(true);
					 
					 var parent1=a.parentNode;
					 var parent2=b.parentNode;
					  		
					parent1.replaceChild(clone2,a); 
					parent2.replaceChild(clone1,b);		
				
						}									
					
			   function fun1(a,b){
			   	var getId=document.getElementById("city");
			   	var getId1=document.getElementById("game"); 
				fun(getId,getId1); 
				 
				}
		</script>
	</head>
	<body>
		<ul id="city">
			<li id="bj" onclick="change(bj,rl)">北京</li>
			<li id="sh" onclick="change(sh,rl)">上海</li>
			<li id="dj" onclick="change(dj,jp)">东京</li>
			<li id="se" onclick="change(se,ms)">首尔</li>
		</ul>
		
		<br><br>
		
		<ul id="game">
			<li id="rl"  onclick="change(rl,bj)">红警</li>
			<li id="sk"  onclick="change(sk,sh)">实况</li>
			<li id="jp"  onclick="change(jp,dj)">极品飞车</li>
			<li id="ms"  onclick="change(ms,se)">魔兽</li>
		</ul>
		<button id="bt1"  onclick="fun1()">点我</button> 
	</body>
</html>
